import React, { useState, useEffect, useRef } from 'react';
// import { SearchOutline, FilterOutline } from 'antd-mobile-icons';
// import './index.less';
// import { Popup, Space, Selector } from 'antd-mobile-v5';
// import { apihook } from '../../../../hooks';
// import axios from 'axios';
// export default function (props) {
//   const [initData, setInitData] = useState([]);
//   const [visible, setVisible] = useState(false);
//   const [selectorValue, setSelectorValue] = useState([]);
//   const [options, setOptions] = useState([
//     { label: '运营1', value: '1', isShow: false },
//     { label: '运营2', value: '2', isShow: false },
//     { label: '运营3', value: '3', isShow: false },
//     { label: '运营4', value: '4', isShow: false },
//     { label: '运营5', value: '5', isShow: false },
//     { label: '运营6', value: '6', isShow: false },
//   ]);
//   const inputRef = useRef();
//   const [inputValue, setInputValue] = useState('');
//   const [value, setValue] = useState([]);
//   const [page, setPage] = useState(1); // 页数
//   const [allpage, setAllpage] = useState(''); // 页数
//   const [baseurl, setBaseUrl] = useState(
//     'https://www.fastmock.site/mock/fe1e37e0a331bc6177530e288327c374/api/api/testInterface?',
//   );
//   let arr2 = [];

//   useEffect(() => {
//     setTimeout(() => {
//       var intersectionObserver = new IntersectionObserver(function (entries) {
//         // 如果不可见，就返回
//         if (entries[0].intersectionRatio <= 0) {
//           return;
//         }
//         // loadItems(10);
//         setPage((a) => {
//           return a + 1;
//         });
//         console.log('Loaded new items');
//       });

//       // 开始观察
//       intersectionObserver.observe(document.querySelector('.scrollerFooter'));
//     }, 500);
//   }, []);

//   useEffect(() => {
//     if (page == 1) {
//       return;
//     }
//     let status = props.status;
//     let pageNo = page;
//     let username = inputValue;
//     let tags = value;
//     console.log(tags, value, '33333333');
//     fetch();
//     async function fetch() {
//       if (page <= allpage) {
//         // const res = await axios.get(
//         //   `${baseurl}statu=${status}&pageNo=${pageNo}&username=${username}&tags=${tags}`,
//         // );

//         const res = await axios.get(baseurl, {
//           params: {
//             status: status,
//             pageNo: pageNo,
//             username: username,
//             tags: tags,
//           },
//         });
//         let a = initData.concat(res.data?.data?.List); //
//         setInitData(a);
//       }
//     }

//     console.log(page, 'dsfsfsfsfsf');
//   }, [page]);

//   useEffect(() => {
//     setPage(1);
//     initDataFn(props.status, 1, inputValue, value);
//   }, [props.status]);

//   function cancelClick() {
//     setSelectorValue([]);
//     setValue([]);
//   }
//   function chooseChange(arr, extend) {
//     arr2 = extend.items.map((i) => {
//       return i.label;
//     });
//     setValue(arr2);
//     setSelectorValue(arr);
//   }
//   function submitClick() {
//     setVisible(false);
//     initDataFn(props.status, 1, inputValue, value);
//     setPage(1);
//   }
//   function openClick() {
//     setVisible(true);
//   }
//   function searchClick() {
//     setInputValue(inputRef.current.value);
//     initDataFn(props.status, 1, inputRef.current.value, value);
//     setPage(1);
//   }
//   const initDataFn = async (status = 1, pageNo = 1, username, tags) => {
//     let res = await apihook({
//       status,
//       pageNo,
//       username,
//       tags,
//     });
//     console.log(res.data.data);
//     setInitData(res.data.data.List);
//     setAllpage(Math.ceil(res.data.data.totalRecord / res.data.data.pageSize)); //总数据多少条/每页多少条，判断是否最后一页
//   };

//   return (
//     <div>
//       {/* input */}
//       <div className="search-list">
//         <div className="search-core">
//           <div className="search-input">
//             <SearchOutline className="icon" />
//             <div className="search-item">
//               <input
//                 onChange={(e) => {
//                   setInputValue(e.target.value);
//                 }}
//                 ref={inputRef}
//               ></input>
//             </div>
//             <div className="search-right" onClick={searchClick}>
//               搜索
//             </div>
//           </div>
//           <div className="search-last">
//             <div className="search-choose" onClick={openClick}>
//               筛选
//             </div>
//             <FilterOutline />
//           </div>
//         </div>
//       </div>

//       {/* 筛选 */}
//       <div>
//         <Space direction="vertical">
//           <>
//             <Popup
//               visible={visible}
//               position="right"
//               bodyStyle={{ minWidth: '60px' }}
//               onMaskClick={() => {
//                 setVisible(false);
//               }}
//             >
//               <div className="select_all">
//                 <div className="advantage"> 擅长方向 </div>
//                 <div className="Checkbox_box">
//                   <Selector
//                     columns={2}
//                     options={options}
//                     multiple={true}
//                     value={selectorValue}
//                     onChange={(arr, extend) => {
//                       chooseChange(arr, extend);
//                     }}
//                   />
//                 </div>
//               </div>
//               <div className="btn">
//                 <button className="btn1" onClick={submitClick}>
//                   提交
//                 </button>
//                 <button className="btn2" onClick={cancelClick}>
//                   重置
//                 </button>
//               </div>
//             </Popup>
//           </>
//         </Space>
//       </div>

//       <div className="footer_content">
//         {initData?.map((item, index) => {
//           return (
//             <div className="content_item" key={item?.id}>
//               <div className="content_top">
//                 <div>{item?.img && <img src={item?.img} />}</div>
//                 <div className="top_text">
//                   <div> {item?.username} </div>
//                   <div> {item?.position} </div>
//                 </div>
//               </div>

//               <div style={{ wordWrap: 'break-word', marginBottom: '10px' }}>
//                 {' '}
//                 {item?.introduce}{' '}
//               </div>
//               <div>
//                 {item?.tags.length > 0 &&
//                   item?.tags.map((i) => {
//                     return (
//                       <span key={i} className="span_item">
//                         {' '}
//                         {i}{' '}
//                       </span>
//                     );
//                   })}
//               </div>
//             </div>
//           );
//         })}
//       </div>
//       <div className="scrollerFooter"></div>
//     </div>
//   );
// }
//////////////////////////////////////////////////////////////////////

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Form, Input, Button } from 'antd';
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 4,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 20,
    },
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 20,
      offset: 4,
    },
  },
};

export default function () {
  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  return (
    <Form
      name="dynamic_form_item"
      {...formItemLayoutWithOutLabel}
      onFinish={onFinish}
    >
      <Form.List
        name="names"
        rules={[
          {
            validator: async (_, names) => {
              if (!names || names.length < 2) {
                return Promise.reject(new Error('At least 2 passengers'));
              }
            },
          },
        ]}
      >
        {(fields, { add, remove }, { errors }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                label={index === 0 ? 'Passengers' : ''}
                required={false}
                key={field.key}
              >
                <Form.Item
                  {...field}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message:
                        "Please input passenger's name or delete this field.",
                    },
                  ]}
                  noStyle
                >
                  <Input
                    placeholder="passenger name"
                    style={{
                      width: '60%',
                    }}
                  />
                </Form.Item>
                {fields.length > 1 ? (
                  <MinusCircleOutlined
                    className="dynamic-delete-button"
                    onClick={() => remove(field.name)}
                  />
                ) : null}
              </Form.Item>
            ))}
            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                style={{
                  width: '60%',
                }}
                icon={<PlusOutlined />}
              >
                Add field
              </Button>
              <Button
                type="dashed"
                onClick={() => {
                  add('The head item', 0);
                }}
                style={{
                  width: '60%',
                  marginTop: '20px',
                }}
                icon={<PlusOutlined />}
              >
                Add field at head
              </Button>
              <Form.ErrorList errors={errors} />
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}
